<template>
    <div class="app-container">
        <!-- <input type="text" autocomplete="off" v-model="asnId" placeholder="do单号">
        <button type="button" @click="fetchActivityOrders">
            <span>查询</span>
        </button>
        <button type="button" @click="research">
            <span>重置</span>
        </button> -->


        <!-- 同步大可壶系统订单 -->
        <el-button type="text" @click="createOrderDialogVisible = true">同步大可壶系统订单</el-button>
        <el-dialog title="同步大可壶系统订单" :visible.sync="createOrderDialogVisible">
            <el-form :model="syncKeyAccountOrderForm" label-width="110px">
                <el-form-item label="大可壶小手单">
                    <el-input v-model="syncKeyAccountOrderForm.keyAccountOrderId" autocomplete="off" size="mini"></el-input>
                </el-form-item>


                <el-form-item label="活动开始">
                    <el-date-picker v-model="syncKeyAccountOrderForm.deliveryStartTime" type="datetime" placeholder="选择日期"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="活动结束">
                    <el-date-picker v-model="syncKeyAccountOrderForm.deliveryEndTime" type="datetime" placeholder="选择日期"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>

                <!-- 大可壶同步门垫、订单信息 -->
                <el-table :data="syncKeyAccountOrderForm.stationUserOrders" size="medium">
                    <el-table-column label="门垫mongoId" prop="上品Id">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.storeMongoId"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单Id" prop="qty">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.userOrderId"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="增加/减少商品">
                        <template slot-scope="scope">
                            <el-button @click="addHandle">+</el-button>
                            <el-button @click="deleteHandle($index)">-</el-button>
                        </template>
                    </el-table-column>
                </el-table>


                <el-form-item>
                    <el-button type="primary" @click="syncKeyAccountOrderOrder">立即创建</el-button>
                    <el-button @click="resetKeyAccountOrderInfo()">重置</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="createOrderDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="createOrderDialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 订单信息展示 -->
        <el-table v-loading="listLoading" :data="userOrderKetAccountOrderList" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column label="大可壶小手单号" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.keyAccountOrderId }}</span>
                </template>
            </el-table-column>
            
            <el-table-column label="订单号" width="200">
                <template slot-scope="scope">
                    {{ scope.row.userOrderId }}
                </template>
            </el-table-column>

            <el-table-column label="展点ID" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.stationCode }}</span>
                </template>
            </el-table-column>
            <el-table-column label="履约开始" align="center">
                <template slot-scope="scope">
                    {{ scope.row.deliveryStartDate }}
                </template>
            </el-table-column>

            <el-table-column label="履约结束" align="center">
                <template slot-scope="scope">
                    {{ scope.row.deliveryEndDate }}
                </template>
            </el-table-column>

            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">
                    {{ scope.row.createTime }}
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>
  
<script>
import { adddoOrder } from '@/api/doOrder/doOrder'
import { getdoOrderList } from '@/api/doOrder/doOrder'
import { getProductDetail } from '@/api/doOrder/doOrder'

import { getProducts } from '@/api/activity/activity'
import { getStations } from '@/api/activity/activity'
import { createUserOrder } from '@/api/userOrder/userOrder'
import { getAllUserOrder } from '@/api/userOrder/userOrder'
import { createBigCustomOrder } from '@/api/keyAccountOrder/keyAccountOrder'


export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: 'success',
                draft: 'gray',
                deleted: 'danger'
            }
            return statusMap[status]
        }
    },
    data() {
        return {
            list: null,
            listLoading: true,
            dialogVisible: false,
            activityId: "",
            activityOrders: null,
            doOrders: [],
            asnId: "",
            createOrderDialogVisible: false,
            createOrderForm: {
                keyAccountOrderId: "",
                stationId: "",
                deliveryStartDate: '',
                deliveryEndDate: "",
                isBigCustom: "1",
                product上品Ids: []
            },
            productList: [],
            stationList: [],
            doOrderProductDetailVisible: false,
            productDetailList: [],
            userOrderKetAccountOrderList:[],
            testSplice:null,
            syncKeyAccountOrderForm:{
                keyAccountOrderId:"",
                deliveryStartTime:"",
                deliveryEndTime:"",
                stationUserOrders:[
                    {
                        storeMongoId:"",
                        userOrderId:""
                    }
                ]
            }

        }
    },
    created() {
        // this.fetchdoOrderList(),
        this.fetchProducts(),
        this.fetchStations(),
        this.fetchUserOrderKeyAccountOrderList()
    },
    methods: {
        fetchProducts() {
            this.listLoading = true
            getProducts({
                "上品Id": "",
                "上品Name": "",
                "mongoId": ""
            }).then(response => {
                console.log(response)
                this.productList = response.data
                this.listLoading = false
            })
        },
        fetchStations() {
            this.listLoading = true
            getStations({
                "stationCode": null,
                "stationName": null
            }).then(response => {
                console.log(response)
                this.stationList = response.data
                this.listLoading = false
            })
        },
        syncKeyAccountOrderOrder() {
            createBigCustomOrder({
                "keyAccountOrderId": this.syncKeyAccountOrderForm.keyAccountOrderId,
                "deliveryStartTime": this.syncKeyAccountOrderForm.deliveryStartTime,
                "deliveryEndTime": this.syncKeyAccountOrderForm.deliveryEndTime,
                "stationUserOrders": this.syncKeyAccountOrderForm.stationUserOrders
            }).then(response =>{
                this.createOrderDialogVisible = false
                this.$message.success(`${response.message}`)
                this.fetchUserOrderKeyAccountOrderList()
            })
        },
        resetKeyAccountOrderInfo() {
            this.syncKeyAccountOrderForm.keyAccountOrderId = "",
            this.syncKeyAccountOrderForm.deliveryStartTime = "",
            this.syncKeyAccountOrderForm.deliveryEndTime = "",
            this.syncKeyAccountOrderForm.stationUserOrders = []

        },
        fetchUserOrderKeyAccountOrderList(){
            getAllUserOrder().then(response =>{
                this.userOrderKetAccountOrderList = response.data
            })
        },
        addHandle() {
            this.syncKeyAccountOrderForm.stationUserOrders.push({
                storeMongoId: '',
                userOrderId: '',
            })
        },
        deleteHandle(i) {
            this.syncKeyAccountOrderForm.stationUserOrders.splice(i, 1)
        },
        
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        research() {
            this.activityId = ""
            this.fetchActivityOrders()
        },
        fetchProductDetail(asnId) {
            getProductDetail({
                "asnId": asnId
            }).then(response => {
                console.log(response)
                this.productDetailList = response.data
            })
        }

    }
}
</script>
  
<style></style>